<template>
    <div class="mt50 mb50">
        <!-- 按钮 -->
        <a-row :gutter="[16, 48]" align="middle" style="margin: 0 10%;">
            <a-col v-for="(item, index) in buttons" :key="index"
                   :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
                <a-button type="default" 
                          shape="round"
                          size="large">
                    <div class="w150 bold">{{ item.title }}</div>
                </a-button>
            </a-col>
        </a-row>
        <!-- 课程列表 -->
        <a-row :gutter="[64, 64]" align="middle" style="margin: 0 10%;">
            <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
                <a-card hoverable>
                    <template #cover>
                        <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                    </template>
                    <a-card-meta title="陈氏太极拳12aaa">
                        <template #description>
                            <div class="bg_orange">太极 健康 运动 养生</div>
                        </template>
                    </a-card-meta>
                    <div class="mt20 mb15 light_gray">
                        <hr/>
                    </div>
                    <a-button type="primary" shape="round">立即观看</a-button>
                </a-card>
            </a-col>
            <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
                <!-- <a-card hoverable>
                    <template #cover>
                        <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                    </template>
                    <a-card-meta title="陈氏太极拳12aaa">
                        <template #description>
                            <div class="bg_orange">太极 健康 运动 养生</div>
                        </template>
                    </a-card-meta>
                    <div class="mt20 mb15 light_gray">
                        <hr/>
                    </div>
                    <a-button type="primary" shape="round">立即观看</a-button>
                </a-card> -->
                <a-card hoverable>
                    <template #cover>
                        <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                    </template>
                    <template #actions>
                        
                    </template>
                    <a-card-meta title="Card title" description="This is the description">
                        <template #avatar>
                            <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                        </template>
                    </a-card-meta>
                </a-card>
            </a-col>
            <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
                <a-card hoverable>
                    <template #cover>
                        <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                    </template>
                    <a-card-meta title="陈氏太极拳12aaa">
                        <template #description>
                            <div class="bg_orange">太极 健康 运动 养生</div>
                        </template>
                    </a-card-meta>
                    <div class="mt20 mb15 light_gray">
                        <hr/>
                    </div>
                    <a-button type="primary" shape="round">立即观看</a-button>
                </a-card>
            </a-col>
        </a-row>
        <a-row class="mt100" :span="24">
            <a-pagination :total="50" show-size-changer />
        </a-row>
    </div>
    <!-- <div>
        <div class="flex_evenly mt100 mb100 pl100 pr100">
            <a-button type="default" 
                      shape="round"
                      size="large">
                <div class="w150 bold">精品课程</div>
            </a-button>
            <a-button type="default" 
                      shape="round"
                      size="large">
                <div class="w150 bold">分类课程</div>
            </a-button>
            <a-button type="default" 
                      shape="round"
                      size="large">
                <div class="w150 bold">课程进度</div>
            </a-button>
            <a-button type="default" 
                      shape="round"
                      size="large">
                <div class="w150 bold">专家介绍</div>
            </a-button>
        </div>
        <div class="aca_main_group flex_column">
            <a-card hoverable style="width: 300px">
                <template #cover>
                    <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                </template>
                <a-card-meta title="陈氏太极拳12aaa">
                    <template #description>
                        <div class="bg_orange">太极 健康 运动 养生</div>
                    </template>
                </a-card-meta>
                <div class="mt20 mb15 light_gray">
                    <hr/>
                </div>
                <a-button type="primary" shape="round">立即观看</a-button>
            </a-card>
            <a-card hoverable style="width: 300px">
                <template #cover>
                    <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                </template>
                <a-card-meta title="中医彭鑫博士养生操">
                    <template #description>
                        <div class="bg_orange">养生操 运动 健康</div>
                    </template>
                </a-card-meta>
                <div class="mt20 mb15 light_gray">
                    <hr/>
                </div>
                <a-button type="primary" shape="round">立即观看</a-button>
            </a-card>
            <a-card hoverable style="width: 300px">
                <template #cover>
                    <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                </template>
                <a-card-meta title="吃鸡蛋=高胆固醇?">
                    <template #description>
                        <div class="bg_orange">鸡蛋 高胆固醇 膳食 均衡 健康</div>
                    </template>
                </a-card-meta>
                <div class="mt20 mb15 light_gray">
                    <hr/>
                </div>
                <a-button type="primary" shape="round">立即观看</a-button>
            </a-card>
        </div>
        <div class="aca_main_group flex_column mt50 mb100">
            <a-card hoverable style="width: 300px">
                <template #cover>
                    <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                </template>
                <a-card-meta title="陈氏太极拳12aaa">
                    <template #description>
                        <div class="bg_orange">太极 健康 运动 养生</div>
                    </template>
                </a-card-meta>
                <div class="mt20 mb15 light_gray">
                    <hr/>
                </div>
                <a-button type="primary" shape="round">立即观看</a-button>
            </a-card>
            <a-card hoverable style="width: 300px">
                <template #cover>
                    <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                </template>
                <a-card-meta title="中医彭鑫博士养生操">
                    <template #description>
                        <div class="bg_orange">养生操 运动 健康</div>
                    </template>
                </a-card-meta>
                <div class="mt20 mb15 light_gray">
                    <hr/>
                </div>
                <a-button type="primary" shape="round">立即观看</a-button>
            </a-card>
            <a-card hoverable style="width: 300px">
                <template #cover>
                    <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                </template>
                <a-card-meta title="吃鸡蛋=高胆固醇?">
                    <template #description>
                        <div class="bg_orange">鸡蛋 高胆固醇 膳食 均衡 健康</div>
                    </template>
                </a-card-meta>
                <div class="mt20 mb15 light_gray">
                    <hr/>
                </div>
                <a-button type="primary" shape="round">立即观看</a-button>
            </a-card>
        </div>
        <div class="mb100">
            <a-pagination :total="50" show-size-changer />
        </div>
    </div> -->
</template>

<script>
export default {
    data() {
        return {
            buttons:[{
                    title: '精品课程'
                }, {
                    title: '分类课程'
                }, {
                    title: '课程进度'
                }, {
                    title: '专家介绍'
                }
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
.aca_main_group {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
</style>